<!--
 * @Author: your name
 * @Date: 2021-07-08 12:46:10
 * @LastEditTime: 2021-11-11 15:45:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\pages\systemSetting\column.vue
-->
<template>
  <div class="all">
    <div class="container">
      <div class="containerTop">
        <div class="containerTopName">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">阶段状态</div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">阶段名称</div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <DataRefresh class="dataStatisticsButton" />
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="addData">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-input v-model="stageInput" :disabled="isInput" placeholder="请输入内容"></el-input>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-input v-model="nameInput" :disabled="isInput" placeholder="请输入内容"></el-input>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                  <div v-if="isEidt">
                      <el-button type="primary" @click.stop="setEidtFalse" class="buttonStyle">编辑</el-button>
                      <el-button type="primary" @click.stop="insertAsyn" class="buttonStyle">添加</el-button>
                  </div>
                  <div v-else>
                      <el-button type="primary" @click.stop="setEidtTrue" class="buttonStyle">保存</el-button>
                      <el-button type="primary" @click.stop="cancelAsyn" class="buttonStyle">取消</el-button>
                  </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="containerBottom">
        <div v-for="(list, index) in getListAsync" :key="index" class="containerList">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input
                placeholder="请输入内容"
                v-model="list.name"
                :disabled="isEidt"
                @change="changeData(list)"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <div class="containerListChildern">
                <div v-for="(item2, index2) in list.children" :key="index2" class="childernDiv">
                  <div>
                    <el-input
                      class="inputNewTag"
                      v-model="item2.name"
                      :disabled="isEidt"
                      @change="changeDatas(item2,index,index2)"
                    ></el-input>
                  </div>
                  <div>
                    <span v-if="item2.name === '排查复现'" class="mark"></span>
                    <span
                      v-if="
                        isEidt === false &&
                          item2.name != '待确认' &&
                          item2.id != '1423154076169924610' &&
                          item2.id != '1425006410613207042' &&
                          item2.id != '1425006439339995137' &&
                          item2.id != '1425006465126576129' &&
                          item2.id != '1425006489088634881' &&
                          item2.id != '1425006541207056386' &&
                          item2.id != '1425006561830449153' &&
                          item2.id != '1425006585087864834' &&
                          item2.id != '1423154128091213825'
                      "
                      class="marks"
                      @click="deleteData(index, index2)"
                      >x</span
                    >
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple"></div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <CommonDialog ref="CommonDialog" />
  </div>
</template>

<script>
import CommonDialog from '@/components/deleteDialog/deleteDialog.vue'
import { Stage } from '@/api/setting/service.js'
import DataRefresh from './dataRefresh.vue'
export default {
    components: {
        CommonDialog,
        DataRefresh
    },
    data() {
        return {
            // 从后端获取的所有阶段数据信息
            getListAsync: [],
            isInput: false,
            // 阶段状态
            stageInput: '',
            // 阶段名称
            nameInput: '',
            // 判断是否属于编辑状态
            isEidt: true,
            // 编辑修改的数据
            insertList: {
                deleteStages: [],
                updateStages: []
            },
            isFix: false,
            // 删除按钮弹出框
            modalType: {
                delete: {
                    type: 'delete',
                    tipInfo: '确定要删除该条数据吗？',
                    btnText: '删除',
                    callBack: 'dellist'
                }
            }
        }
    },
    mounted() {
        this.getCategory()
    },
    methods: {
    /**
     * @description: 删除某一条数据的弹出框
     * @param {Number} index 删除数据的索引值
     * @param {Array} _modalInfo 删除弹出框的文字信息和确认按钮调用的事件
     */
        onActionConfirm(index, _modalInfo) {
            this.$refs.CommonDialog.Show(_modalInfo.type, _modalInfo.tipInfo, _modalInfo.btnText, () => {
                this.$refs.CommonDialog.OnHandleCancel()
                this[_modalInfo.callBack](index)
            })
        },
        cancelAsyn() {
            this.isEidt = true
            this.isInput = false
            this.isFix = false
            // this.getCategory()
        },

        /**
     * @description: 二次确认删除数据
     * @param {Number} index 索引
     */
        dellist(index) {
            const item = this.getListAsync[index]
            this.insertList.deleteStages.push({
                id: item.id,
                name: item.name
            })
            this.getListAsync.splice(index, 1)
        },

        /**
     * @description:点击保存按钮
     */
        async setEidtTrue() {
            if (this.isFix) {
                this.getCategory()
                this.isInput = false
                this.isEidt = true
                this.isFix = false
                this.insertList.deleteStages = []
                this.insertList.updateStages = []
                this.$message.error('名字不能重复')
                // this.getCategory()
            } else {
                try {
                    const result = await Stage.StageSaveAsync(this.insertList)
                    if (result.success) {
                        this.getCategory()
                        this.isEidt = true
                        this.isInput = false
                        this.isFix = false
                        this.insertList.deleteStages = []
                        this.insertList.updateStages = []
                        this.$message.success(result.message)
                    } else {
                        this.getCategory()
                        this.isInput = false
                        this.isEidt = true
                        this.isFix = false
                        this.insertList.deleteStages = []
                        this.insertList.updateStages = []
                        this.$message.error(result.message)
                    }
                } catch (err) {
                    this.isEidt = true
                    this.$message.error('服务器异常')
                }
            }
        },

        /**
     * @description: 删除数据
     * @param {Number} index 索引值
     * @param {Number} index2 索引值
     */
        deleteData(index, index2) {
            // console.log(index, index2)
            // console.log(this.getListAsync[index].children.length)
            if (this.getListAsync[index].children.length > 1) {
                const item = this.getListAsync[index].children[index2]
                this.insertList.deleteStages.push({
                    id: item.id,
                    name: item.name
                })
                this.getListAsync[index].children.splice(index2, 1)
            } else {
                this.onActionConfirm(index, this.modalType.delete)
            }
        },

        /**
     * @description:点击保存按钮
     */
        setEidtFalse() {
            this.isEidt = false
            this.isInput = true
        },

        /**
     * @description:异步获取所有阶段信息
     */
        async getCategory() {
            try {
                const result = await Stage.StageGetListAsync()
                if (result.success) {
                    this.getListAsync = result.data
                } else {
                    this.$message.error('数据获取失败')
                }
            } catch (err) {
                console.log(err)
                this.$message.error('服务器异常')
            }
        },
        /**
     * @description:修改某一条数据
     * @param {Object}item 你要修改的那一条数据
     */
        async changeData(item) {
            this.insertList.updateStages.push({
                id: item.id,
                name: item.name
            })
        },
        /**
     * @description:修改某一条数据
     * @param {Object}item 你要修改的那一条数据
     */
        async changeDatas(item, index, index2) {
            const arr = this.getListAsync[index].children
            arr.splice(index2, 1)
            console.log(arr)
            for (let i = 0; i < arr.length; i++) {
                const name = arr[i].name
                if (name === item.name) {
                    console.log(name === item.name)
                    this.isFix = true
                }
            }
            this.insertList.updateStages.push({
                id: item.id,
                name: item.name
            })
        },

        /**
     * @description:异步添加阶段信息
     */
        async insertAsyn() {
            if (this.stageInput != '' && this.nameInput != '') {
                const arr = {
                    stageStatus: {
                        name: this.stageInput,
                        stageType: 0
                    },
                    stageName: {
                        name: this.nameInput,
                        stageType: 1
                    }
                }
                try {
                    const result = await Stage.StageInsertAsync(arr)
                    if (result.success) {
                        this.getCategory()
                        this.stageInput = ''
                        this.nameInput = ''
                        this.$message.success(result.message)
                    } else {
                        this.$message.error('数据添加失败')
                    }
                } catch (err) {
                    this.$message.error('服务器异常')
                }
            } else {
                this.$message.error('未填写完整')
            }
        }
    }
}
</script>
<style lang="less" scoped>
.container {
  height: 813px;
  margin: 31px;
  background: #ffffff;
  border: 1px solid #dcdfe4;
  box-shadow: 0px 2px 5px 0px rgba(152, 160, 179, 0.2);
  border-radius: 5px;
  padding: 30px;
}
.dataStatisticsButton {
  float: right;
  margin-right: 10px;
}
.el-input {
  width: 60%;
}
.el-col-8 {
  overflow-x: auto;
}
.containerTop {
  width: 100%;
  .containerTopName {
    height: 40px;
    border-bottom: 1px solid #c8cdd5;
  }
  .addData {
    width: 100%;
    line-height: 50px;
    border-bottom: 1px solid #c8cdd5;
    padding: 10px 0;
  }
}
.containerBottom {
  width: 100%;
  height: 675px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0;
  .containerList {
    height: 180px;
    line-height: 30px;
    padding: 10px 0;
    position: relative;
    border-bottom: 1px solid #c8cdd5;
    .containerListChildern {
      overflow-y: auto;
      width: 60%;
      height: 150px;
      border: 1px solid rgb(228, 228, 228);
      padding: 10px;
      .childernDiv {
        width: 100%;
        height: 45px;
        .inputNewTag {
          width: 90%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          float: left;
          margin-bottom: 10px;
        }
        .mark {
          width: 4%;
          height: 11px;
          display: inline-block;
          background: #e4e7ed;
          margin-top: 10px;
          margin-left: 2%;
          border-radius: 50%;
          position: relative;
        }
        .marks {
          margin-left: 2%;
        }
      }
    }
  }
}
.buttonStyle {
  width: 70px;
  height: 30px;
  background: #eaf2ff;
  border: 1px solid #3579e0;
  border-radius: 5px;
  color: #3579e0;
  line-height: 8px;
  z-index: 999;
}
.el-button {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
}
</style>
